<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页查询和添加</title>
    <!-- 前端调用服务器数据 -->
    <style>
        table {
            border: 1px solid black;
            width: 400px;
            border-collapse: collapse;
        }

        tr,
        td,
        th {
            border: 1px solid black;
            text-align: center;
        }

        .adds {
            border: 1px solid black;
            margin-top: 20px;
            width: 400px;
            text-align: center;
        }

        /* .adds input{

        } */
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>账号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">
                    <button id="first">首页</button>
                    <button id="up">上一页</button>
                    <span id="pageIndex"></span>
                    <span>/</span>
                    <span id="pageAll"></span>
                    <button id="next">下一页</button>
                    <button id="end">尾页</button>
                </td>
            </tr>
        </tfoot>
    </table>

    <div class="adds">
        <p>
            账号: <input type="text" id="adds_id">
        </p>
        <p>
            姓名: <input type="text" id="adds_name">
        </p>
        <p>
            年龄: <input type="text" id="adds_age">
        </p>
        <p>
            性别:
            <input type="radio" name="sex" value="男" checked>男
            <input type="radio" name="sex" value="女">女
        </p>
        <p>
            <button id="btn_add">添加</button>
            <button id="btn_cancel">取消</button>
        </p>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.0.0-alpha.1/axios.js"></script>
    <script>
        let pageIndex = 1
        let pageAll = 1
        let pageNumber = 5
        //异步方式
        // async function loadData(){
        //     $("#tbody").html("")
        //     let {data:{page,count}}=await axios.get("http://127.0.0.1:8080/pages",{
        //         params:{
        //             pageIndex,pageNumber
        //         }
        //     })
        // }
        // loadData()



        function loadData() {
            $("#tbody").html("")
            //jquery  分页效果
            axios.get("http://127.0.0.1:8080/pages", {
                params: { pageIndex, pageNumber }
            }
            ).then(res => {

                let { data: { page, count } } = res
                pageAll = Math.ceil(count / pageNumber)
                $("#pageIndex").html(pageIndex)
                $("#pageAll").html(pageAll)

                page.forEach(item => {
                    let sex = item.sex == "m" ? "男" : "女"
                    let tr = $(` <tr>
                  <td>${item.id}</td>
                  <td>${item.name}</td>
                  <td>${item.age}</td>
                  <td>${sex}</td>
                  <td>
                     <button onclick="amend_infor('${item.id}')">编辑</button>
                     <button onclick="del_infor('${item.id}')">删除</button>
                  </td>
                          </tr> `)
                    $("#tbody").append(tr)

                });

            })
        }
        loadData()


        $("#first").click(function () {
            pageIndex = 1;
            loadData();
        })
        $("#end").click(function () {
            pageIndex = pageAll;
            loadData();
        })
        $("#up").click(function () {
            if (pageIndex-- <= 1) {
                pageIndex = 1
            }
            loadData();
        })
        $("#next").click(function () {
            if (pageIndex++ <= pageAll) {
                pageIndex = pageAll
            }
            loadData();
        })

        $("#btn_add").click(async function () {
            let id = $("#adds_id").val()
            let name = $("#adds_name").val()
            let age = $("#adds_age").val()
            let sex = [...$("input[name='sex']")].find(key => key.checked).value

            //修改
            //将获取的数据放在一个对象中
            let arrinf = { id, name, age, sex }
            if (!id || !name || !age || !sex) {
                alert("信息不能为空,请输入内容")
                return
            }


            if ($(this).html() == "添加") {
                //异步 
                //添加内容前根据id判断id是否已存在
                let { data } = await axios.get('http://127.0.0.1:8080/getInforOne', {
                    params: { id }
                })
                if (data) {
                    alert("账号已存在,添加失败")
                }

                //添加内容
                //{data:res_add}解构data的同时给data重命名
                let { data: res_add } = await axios.post("http://127.0.0.1:8080/add", arrinf)
                if (res_add) {
                    alert("添加成功")
                    loadData()
                    $("#btn_cancel").click()
                }
            } else {
                axios.post("http://127.0.0.1:8080/amendInfor", arrinf).then(res => {
                    let { data } = res
                    if (data) {
                        alert("修改成功")
                        loadData()
                        $("#btn_cancel").click()
                    } else {
                        alert(err)
                    }
                })
            }
        })
        //修改


        //     //添加前判断账号是否存在
        //     $.get('http://127.0.0.1:8080/getInforOne', { id }, res => {
        //         //如果为空则表示没有,可以添加
        //         if (res === "") {
        //             //将添加的内容发生到后端
        //             $.post("http://127.0.0.1:8080/add", arrinf, res => {
        //                 if (res) {
        //                     alert("添加成功")
        //                     loadData()
        //                     $("#btn_cancel").click()
        //                 }
        //             })
        //         } else {
        //             alert("账号已存在,添加失败")
        //         }
        //     })

        // } else {
        //     $.post("http://127.0.0.1:8080/amendInfor", arrinf, res => {

        //         if (res) {
        //             alert("修改成功")
        //             loadData()
        //             $("#btn_cancel").click()
        //         }
        //     })

        // }





        $("#btn_cancel").click(function () {
            $("#adds_id").val('').removeAttr("readonly")
            $("#adds_name").val('')
            $("#adds_age").val('')
            $("input[name='sex']")[0].checked = true
            $("#btn_add").html("添加")
        })


        //根据函数获取
        async function amend_infor(id) {
            let { data: res_inf } = await axios.get("http://127.0.0.1:8080/getInforOne", { params: { id } })
            $("#adds_id").val(res_inf.id).attr("readonly", "readonly")
            $("#adds_name").val(res_inf.name)
            $("#adds_age").val(res_inf.age);

            [...document.getElementsByName("sex")].find(items => {
                // console.log(items.value);
                console.log(res_inf.sex);
                if (items.value == res_inf.sex) {
                    // console.log(items.checked);
                    items.checked = true
                }
            })
            //点击编辑后,添加按钮需要变成修改
            $("#btn_add").html("修改")

        }


        //删除
        function del_infor(id) {
            if (confirm("你确定要删除吗?")) {
                axios.post("http://127.0.0.1:8080/delete", { id }).then(res => {

                    let { data } = res
                    if (data) {
                        alert("删除成功")
                        loadData()

                    } else {
                        alert('删除失败')
                    }
                })
            }
        }
    </script>
</body>

</html>